<template>
  <div class="yemian">
    <div class="dingbu">
      <div class="biaoti">
        <img src="../../assets/image/纸飞机.png" class="tubiao">
        <span class="wz">NBM在线考试系统</span>
      </div>
      <XSCD />
      <div class="touxiang">
        <img src="../../assets/image/头型.png" style="height: 50px; width: 50px;">
        <UserInfo />
      </div>
    </div>
    
    <!-- 优化后的轮播图部分 -->
    <div class="LBT">
      <el-carousel 
        :interval="3000" 
        height="170px" 
        trigger="click" 
        arrow="never"
        indicator-position="outside"
        autoplay>
        <el-carousel-item v-for="(image, index) in images" :key="index">
          <img :src="image" class="carousel-image" />
        </el-carousel-item>
      </el-carousel>
    </div>

    <div class="zw" style="display: flex; ">
      <div class="HY">
        <span>在线学习</span>
        <div class="subject-tabs">
        <div class="action-button publish-exam"  >
                <div class="bj" @click="yw">
                    <img src="../../assets/image/1234.png" style="width: 200px; height: 200px; " >
                    <div style="margin-left: 15px; font-size: 25px;">语  文</div>
                </div>
        </div>
        <div class="action-button publish-exam"  >
                <div class="bj" @click="sx">
                    <img src="../../assets/image/2.png" style="width: 200px; height: 200px; ">
                    <div style="margin-left: 15px; font-size: 25px;">数  学</div>
                </div>
        </div>

        <div class="action-button publish-exam"  >
            <div class="bj" @click="yy">
                <img src="../../assets/image/15.png" style="width: 200px; height: 200px; ">
                <div style="margin-left: 15px; font-size: 25px;">英  语</div>
            </div>
        </div>
      </div>
      </div>

      <div class="announcement">
        <h1 style="text-align: center;">公告</h1>
        <div class="announcement-list">
          <div v-for="(item, index) in currentPageData" :key="index" class="announcement-item">
            <h2>{{ item.title }}</h2>
            <p class="date">{{ item.date }}</p>
            <p class="content">{{ item.content }}</p>
            <el-button type="text" @click="viewDetail(item.id)">查看详情</el-button>
          </div>
        </div>

        <div class="pagination">
          <el-button :disabled="currentPage === 1" @click="prevPage">上一页</el-button>
          <span v-for="page in totalPages" :key="page" class="page-number" 
                :class="{ active: currentPage === page }" @click="goToPage(page)">
            {{ page }}
          </span>
          <el-button :disabled="currentPage === totalPages" @click="nextPage">下一页</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import XSCD from '../../components/XSCD.vue';
import UserInfo from '../../components/UserInfo.vue';
import { ref, computed } from 'vue';

// 使用require确保图片正确加载
const images = ref([
  new URL('../../assets/image/lb1.jpg', import.meta.url).href,
  new URL('../../assets/image/4.png', import.meta.url).href,
  new URL('../../assets/image/纸飞机.png', import.meta.url).href,
]);

const announcements = ref([
  { id: 1, title: '最新公告', date: '2025-1-1', content: '在线考试系统在线考试系统在线考试系统在线考试系统......' },
  { id: 2, title: '最新公告', date: '2025-1-1', content: '在线考试系统在线考试系统在线考试系统在线考试系统......' },
  { id: 3, title: '最新公告', date: '2025-1-1', content: '在线考试系统在线考试系统在线考试系统在线考试系统......' },
  { id: 4, title: '最新公告', date: '2025-1-1', content: '在线考试系统在线考试系统在线考试系统在线考试系统......' },
  { id: 5, title: '最新公告', date: '2025-1-1', content: '在线考试系统在线考试系统在线考试系统在线考试系统......' },
  { id: 6, title: '最新公告', date: '2025-1-1', content: '在线考试系统在线考试系统在线考试系统在线考试系统......' },
]);

// 分页逻辑
const itemsPerPage = 3;
const currentPage = ref(1);

const totalPages = computed(() => Math.ceil(announcements.value.length / itemsPerPage));

const currentPageData = computed(() => {
  const start = (currentPage.value - 1) * itemsPerPage;
  const end = start + itemsPerPage;
  return announcements.value.slice(start, end);
});

const prevPage = () => currentPage.value > 1 && currentPage.value--;
const nextPage = () => currentPage.value < totalPages.value && currentPage.value++;
const goToPage = (page) => currentPage.value = page;

const yw = () => {
  window.open(
    'https://www.bilibili.com/video/BV1oh4y1s7Lb/?spm_id_from=333.1387.upload.video_card.click&vd_source=3623c8d55e2a4e245e479257922b4fbb',
    '_blank'
  );
}
const sx = () => {
  window.open(
    'https://www.bilibili.com/video/BV1Eb411u7Fw/?spm_id_from=333.1387.upload.video_card.click&vd_source=3623c8d55e2a4e245e479257922b4fbb',
    '_blank'
  );
}
const yy = () => {
  window.open(
    'https://www.bilibili.com/video/BV1XY411J7aG/?spm_id_from=333.337.search-card.all.click&vd_source=3623c8d55e2a4e245e479257922b4fbb',
    '_blank'
  );
}
</script>

<style scoped>
.yemian {
  width: 100%;
  min-height: 100vh;
  padding: 0 20px;
  box-sizing: border-box;
}

.dingbu {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e0e0e0;

  box-sizing: border-box;
}

.biaoti {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tubiao {
  height: 40px;
  width: 40px;
}

.wz {
  color: #333;
  font-size: 24px;
  font-weight: bold;
}

.touxiang {
  display: flex;
  align-items: center;
  gap: 10px;
}

.LBT {
  width: 100%;
  height: 170px;
  margin: 20px 0;
}

.carousel-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.HY {
  text-align: center;
  font-size: 50px;
  /* padding-top: 110px;
  padding-left: 70px; */
}

.announcement {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

.announcement-list {
  margin-top: 20px;
}

.announcement-item {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}

.announcement-item h2 {
  margin: 0;
  font-size: 18px;
}

.announcement-item .date {
  color: #888;
  font-size: 14px;
}

.announcement-item .content {
  margin: 10px 0;
  color: #555;
}

.pagination {
  margin-top: 20px;
  text-align: center;
}

.page-number {
  display: inline-block;
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.page-number.active {
  background-color: #409eff;
  color: white;
  border-color: #409eff;
}

.action-button {
 width: 300px;
 height: 300px;
 border-radius: 75%;

}


.bj{
  flex: 1;
  text-align: center;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s; 
  background-color: #dadada;
  margin-top: 50px;
  margin-right: 40px;
  border-radius: 20%;
  box-shadow: 
    3px 3px 0 0 rgba(0, 0, 0, 0.1),
    6px 6px 0 0 rgba(0, 0, 0, 0.05);
}
.bj:hover {
transform: scale(1.05); /* 悬停放大效果 */
}

.bj.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}
.subject-tabs{
    width: 100%;
    height: 400px;
    display: flex;
    justify-content: center;
    margin-top: 45px;
    
}
</style>